<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-21 14:39:03
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-27 13:40:29
-->
<template>
    <div >
      <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增员工 </a-button>
      </template>
      <template #img="{record}">
        <TableImg
        :imgList="[
        record.goods_image
        ]"
        :size="50"
        
        />
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              label:'修改',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'clarity:trash-solid',
              label:'删除',
              popConfirm:{
                title:'是否删除改员工',
                confirm:handleDel.bind(null, record)
              }
            }
          ]"
        />

      </template>
      
    </BasicTable>
   <EidtModal @register="registerEditModal" />
   <AddModal @register="registerAddModal" />
    </div>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction,TableImg, FetchSetting } from '/@/components/Table';
import {
  DelParams,
} from '/@/api/staff/model/staffModel';
import { getStaffList,delStaff } from '/@/api/staff';
import { columns, searchFormSchema} from './staff.data';
import EidtModal from './modal/EditModal.vue';
import AddModal from './modal/AddModal.vue';
 import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
const [registerEditModal , editModal] = useModal();
const [registerAddModal , addModal] = useModal();
const [registerTable, { reload,setLoading }] = useTable({
  title: '员工列表',
  api: getStaffList,
  fetchSetting: {
    sizeField:'list.per_page',
    // // 请求接口当前页数
    pageField: 'list.current_page',
    // 请求结果列表字段  支持 a.b.c
    listField: 'list.data',
    // 请求结果总数字段  支持 a.b.c
    totalField: 'list.total',
  } as FetchSetting,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  showIndexColumn: false,
  actionColumn: {
    width: 80,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: undefined,
  },
});

const handleEdit = (record: Recordable) => {
  editModal.openModal(true,{reload,record})
}

const handleSuccess = () => {
  // reload();
}
// 添加员工
const handleCreate=()=>{
  addModal.openModal(true,{reload,record:{
    real_name: "",
    user_name: "",
    password: "",
    password_confirm: "",
    sort: 100
  }})
}

// 删除员工
const handleDel=(record)=>{
  let param={
    userId:record.store_user_id
  } as DelParams
  setLoading(true)
  delStaff(param).then(({ message }) => {
    createMessage.success(message);
    reload()
  }).catch(({ message }) => {
    createMessage.error(message);
    setLoading(false)
  })
}
</script>
